<template>
  <div>
    <!--引用表格-->
    <BasicTable @register="registerTable">
      <!--插槽:table标题-->
      <template #tableTitle>
        <!-- <a-upload name="file" :showUploadList="false" :action="ossAction" :headers="tokenHeader"
          :beforeUpload="beforeUpload" @change="handleChange">
          <a-button type="primary" preIcon="ant-design:upload-outlined">OSS文件上传</a-button>
        </a-upload> -->

        <UploadDragger v-model:fileList="fileList" name="file" :multiple="true" :headers="tokenHeader" :action="ossAction"
          :beforeUpload="beforeUpload" @change="handleChange" @drop="handleDrop">
          <a-button type="primary" preIcon="ant-design:upload-outlined">OSS多文件上传</a-button>
        </UploadDragger>
      </template>
      <!--操作栏-->
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>
      <template #url="{ record }">
        <div style="display: flex; align-items: center;">
          <div class="ellipsis"> {{ record.url }}</div>
          <copy-outlined @click='copyText(record.url)' color="blue" />
        </div>
      </template>
    </BasicTable>
  </div>
</template>

<script lang="ts" name="system-ossfile" setup>
import { UploadDragger } from 'ant-design-vue';
//ts语法
import { ref, computed, unref } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { useMessage } from '/@/hooks/web/useMessage';
import { columns, searchFormSchema } from './ossfile.data';
import { list, deleteFile, getOssUrl, getMinioUrl } from './ossfile.api';
import { useGlobSetting } from '/@/hooks/setting';
import { getToken } from '/@/utils/auth';
import { encryptByBase64 } from "@/utils/cipher";

const { createMessage } = useMessage();
const glob = useGlobSetting();
const tokenHeader = { 'X-Access-Token': getToken() };
//注册table数据
const [registerTable, { reload }] = useTable({
  api: list,
  rowKey: 'id',
  columns,
  formConfig: {
    labelWidth: 120,
    schemas: searchFormSchema,
    autoSubmitOnEnter: true,
  },
  striped: true,
  useSearchForm: true,
  showTableSetting: true,
  clickToRowSelect: false,
  bordered: true,
  showIndexColumn: false,
  tableSetting: { fullScreen: true },
  beforeFetch: (params) => {
    return Object.assign({ column: 'createTime', order: 'desc' }, params);
  },
  actionColumn: {
    width: 80,
    title: '操作',
    dataIndex: 'action',
    slots: { customRender: 'action' },
    fixed: undefined,
  },
});
/**
 * 上传url
 */
const ossAction = computed(() => `${glob.uploadUrl}${getOssUrl}`);
const minioAction = computed(() => `${glob.uploadUrl}${getMinioUrl}`);
import { CopyOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
const copyStatus = ref('点击复制');
async function copyText(text) {
  try {
    await navigator.clipboard.writeText(text);
    message.success('复制成功!');
    copyStatus.value = '已复制 ✓';
    setTimeout(() => copyStatus.value = '点击复制', 2000);
  } catch (err) {
    message.error('复制失败，请手动复制');
    console.error('复制失败:', err);
  }
};
/**
 * 预览
 */
function handleView(record) {
  if (record && record.url) {
    console.log('glob.onlineUrl', glob.viewUrl);
    //update-begin---author:scott ---date:2024-06-03  for：【TV360X-952】升级到kkfileview4.1.0---
    // let filePath = encodeURIComponent(record.url);
    let url = encodeURIComponent(encryptByBase64(record.url));
    // //文档采用pdf预览高级模式
    // if(filePath.endsWith(".pdf") || filePath.endsWith(".doc") || filePath.endsWith(".docx")){
    //   filePath = filePath
    // }
    let previewUrl = `${glob.viewUrl}?url=` + url;
    //update-end---author:scott ---date:2024-06-03  for：【TV360X-952】升级到kkfileview4.1.0---

    window.open(previewUrl, '_blank');
  }
}
import type { UploadChangeParam } from 'ant-design-vue';
const fileList = ref([]);
const handleChange = (info: UploadChangeParam) => {
  if (info.file.status === 'done') {
    if (info.file.response.success) {
      reload();
      createMessage.success(`${info.file.name} 上传成功!`);
    } else {
      createMessage.error(`${info.file.response.message}`);
    }
  } else if (info.file.status === 'error') {
    createMessage.error(`${info.file.response.message}`);
  }
};
/**
 * 文件上传事件
 */
// function handleChange(info) {
//   if (info.file.status === 'done') {
//     if (info.file.response.success) {
//       reload();
//       createMessage.success(`${info.file.name} 上传成功!`);
//     } else {
//       createMessage.error(`${info.file.response.message}`);
//     }
//   } else if (info.file.status === 'error') {
//     createMessage.error(`${info.file.response.message}`);
//   }
// }

const handleDrop = (e: DragEvent) => {
  console.log(e);
}
/**
 * 删除事件
 */
async function handleDelete(record) {
  await deleteFile({ id: record.id }, reload);
}

/**
 * 上传前事件
 */
function beforeUpload(file) {
  var fileType = file.type;
  if (fileType === 'image') {
    if (fileType.indexOf('image') < 0) {
      createMessage.warning('请上传图片');
      return false;
    }
  } else if (fileType === 'file') {
    if (fileType.indexOf('image') >= 0) {
      createMessage.warning('请上传文件');
      return false;
    }
  }
  return true;
}

/**
 * 操作栏
 */
function getTableAction(record) {
  return [
    {
      label: '删除',
      popConfirm: {
        title: '是否确认删除',
        confirm: handleDelete.bind(null, record),
      },
    },
  ];
}
</script>

<style scoped>
.ellipsis {
  width: 200px;
  /* 必须设置固定宽度或最大宽度 */
  white-space: nowrap;
  /* 强制文本不换行 */
  overflow: hidden;
  /* 隐藏溢出内容 */
  text-overflow: ellipsis;
  /* 显示省略符号 */
}
</style>
